<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>three</title>
    <style>
        body {
            background-color: #bfe3dd;
            color: #000;
        }
    </style>
</head>

<body>
    <div class="canvas">
    </div>
    <video src="https://cdn.jsdelivr.net/npm/electroluxasset/video/origin.mp4" controls></video>
    <button onclick="change()" >点哦</button>
    <!-- step1:引入插件 -->
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

    <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm",
      "gui":"https://unpkg.com/three/examples/jsm/libs/lil-gui.module.min.js",
      "OrbitControls":"https://unpkg.com/three/examples/jsm/controls/OrbitControls.js",
        "FBXLoader":"https://unpkg.com/three/examples/jsm/loaders/FBXLoader"
    }
  }
</script>
    <script type="module">
        document.querySelector("button").addEventListener('click',()=>{
         
            // alert("ds")
            for(var j=0; j<actions.length; j++){
                        if(j == 16){
                            actions[j].play();
                        }
                        else{
                            actions[j].stop();
                        }
                    }
       
        })
        import * as THREE from 'three';
        import { GUI } from "gui";
        import { OrbitControls } from "OrbitControls"
        import { FBXLoader } from "FBXLoader"
        console.log(THREE)

        const clock = new THREE.Clock();
        let mixer
        let actions = []; //所有的动画数组
        // function initModel(url) {
        //     return new Promise((resolve) => {
        //         new FBXLoader().load(url, (object) => {
        //             mixer = new THREE.AnimationMixer( object );
        //             for(let i in object.animations){
        //                 actions[i] = mixer.clipAction( object.animations[ i ] );
        //             }
        //             // action = mixer.clipAction( object.animations[ 16 ] );
        //             // console.log(object.animations)
                    
        //             object.traverse((res) => {
        //                 // 贴图
        //                 if (res.type == "Mesh") {
        //                     const textureUrl = ["https://cdn.jsdelivr.net/npm/electroluxasset/model/front_css_example/sphere/ref.jpg", "https://cdn.jsdelivr.net/npm/electroluxasset/model/front_css_example/sphere/Control_Module_nmap.jpg","https://cdn.jsdelivr.net/npm/electroluxasset/model/front_css_example/sphere/walker_color.jpg"]
        //                     for (let i in textureUrl) {
        //                         const textureLoader = new THREE.TextureLoader();
        //                         const textureNormal = textureLoader.load(
        //                             textureUrl[i]
        //                         );
        //                         res.material.map = textureNormal
        //                     }


        //                     // res.material.wireframe = true;
    
        //                 }

        //             });
        //             resolve(object);
        //         });
        //     });
        // }

        // let model = await initModel("https://cdn.jsdelivr.net/npm/electroluxasset/model/front_css_example/sphere/1.fbx");
        // model.setAnimation( actions[0].name );
        // model.scale.set(0.3, 0.3, 0.3);
        
        // console.log(GUI)
        class threeInit {
            constructor(param) {
                this.param = {
                    x: 0,
                    y: 0,
                    z: 0
                }
                this.status =16
                this.initScene()
                this.initLight()
                this.initObject()
                this.initCamera()
            }
            // 初始化物体
            initObject() {
                //材质
                // let material = new THREE.MeshLambertMaterial({
                //     color: 0x05c5cf4
                // });
                // let geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
                // this.mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
                // this.mesh.position.set(this.param.x, this.param.y, this.param.z)

                // this.scene.add(this.mesh)
                // this.mesh = model
                // this.scene.add(model)
            }
            initScene() {
                this.scene = new THREE.Scene()
            }
            initLight() {
                let pointLight = new THREE.PointLight(0xffffff); //创建一个白色的点光源
                pointLight.position.set(0, 0, 150);
                this.scene.add(pointLight);
                let ambient = new THREE.AmbientLight(0xffffff, 1);
                this.scene.add(ambient);
                //                 const skyColor = 0xB1E1FF;  // bleu
                //   const groundColor = 0xB97A20;  // orange brun
                //   const intensity = 2;
                //                 const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
                //                 this.scene.add(light);
            }
            initCamera() {
                this.width = 1280; //canvas画布宽度
                this.height = 600; //canvas画布高度
                let k = this.width / this.height; //canvas画布宽高比
                //三维场景显示范围控制系数，系数越大，显示的范围越大
                //创建相机对象  可视角度  实际窗口的纵横比  近处的裁面的距离
                this.camera = new THREE.PerspectiveCamera(40, k, 1, 10000);
                this.camera.position.set(10, 5,10); //设置相机位置
                let v1 = new THREE.Vector3(0, 0, 0)
                // this.camera.lookAt(v1); //设置相机方向(指向的场景对象)
                let that = this
                setTimeout(() => {
                    that.control.target =v1
                }, 100);
                
            }
            initGui(status) {

                //1.设置基本属性
                let gui = new GUI();
                gui.domElement.classList.add();
                gui.domElement.style.cssText = "position:absolute;top:0px;right:0px;";
                // 2.等于params.x的属性跟mesh.position.y绑定
                //-3 到 3 每一次0.01  mesh.position.x
                gui.add(this.param, 'x', -3, 100, 0.01)
                    .onChange(() => {
                        this.mesh.position.x = this.param.x;
                    }).name('x的位置')

                gui.add(this.param, 'y', -3, 100, 0.01)
                    .onChange(() => {
                        this.mesh.position.y = this.param.y;
                    }).name('y的位置(上下)')

                gui.add(this.param, 'z', -3, 100, 0.01)
                    .onChange(() => {
                        this.mesh.position.z = this.param.z;
                    }).name('z的位置')
                // gui.add(params, 'wireframe', [true, false])
                //     .onChange(function () {
                //         material.wireframe = params.wireframe;
                //     }).name('设置线框')


                // // gui.add(material, 'wireframe').name('设置线框')
                // // gui.add(params,'background').name('设置天空')
                // //gui.addColor
                // gui.addColor(params, 'color')
                //     .onChange(function () {
                //         material.color.set(params.color);
                //     });

                // //2.重要：实现切换天空的效果
                // gui.add(params, 'background', ["sky", "home"])
                //     .onChange(function () {
                //         initskyboxsun25deg(params.background);
                //     }).name("切换天空");
            }
            initSkyBox() {

                const starUrls = [
                    ("https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/px.jpg"), // right
                    ("https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/nx.jpg"), // left
                    ("https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/py.jpg"), // top
                    ("https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/ny.jpg"), // bottom
                    ("https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/pz.jpg"), // back
                    ("https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/nz.jpg"), // front
                ];
                this.scene.background = new THREE.CubeTextureLoader().load(starUrls);
                

            }
            changeAction(status){
                this.status = status
                        for(var j=0; j<actions.length; j++){
                        if(j == status){
                            actions[j].play();
                        }
                        else{
                            actions[j].stop();
                        }
                    }

            }
            initVr(left,right,front){
             
                this.scene.children = this.scene.children.filter((obj)=> {
                    if (obj.name.includes("video")) {
                        // obj.geometry.dispose();
                        // obj.material.dispose();
                        return false
                    }
                    return true
                })
                // this.scene.de
                console.log(this.scene.children,this.scene.children.length)
                // if()
                var materials = [];
                //根据左右上下前后的顺序构建六个面的材质集
                var texture_right = new THREE.TextureLoader().load(right );
                materials.push( new THREE.MeshBasicMaterial( { map: texture_right} ) );
                var texture_left = new THREE.TextureLoader().load( left );
                materials.push( new THREE.MeshBasicMaterial( { map: texture_left} ) );
                
                
                
                var texture_top = new THREE.TextureLoader().load( 'https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/py1.jpg' );
                materials.push( new THREE.MeshBasicMaterial( { map: texture_top} ) );
                
                // var texture_bottom = new THREE.TextureLoader().load( 'https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/ny.jpg' );
                var texture_bottom = new THREE.TextureLoader().load( 'https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/py1.jpg' );
                materials.push( new THREE.MeshBasicMaterial( { map: texture_bottom} ) );
                
                var texture_front = new THREE.TextureLoader().load( front );
                materials.push( new THREE.MeshBasicMaterial( { map: texture_front} ) );
                
                var texture_back = new THREE.TextureLoader().load( 'https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/py1.jpg' );
                materials.push( new THREE.MeshBasicMaterial( { map: texture_back} ) );
                
                var box = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), materials );
                box.name = "video"
                console.log(box)
                box.position.set(0,0,0)
                box.scale.set(70,70,70)
                box.geometry.scale( 1, 1, -1 );
                this.mesh = box
                box.position.set(this.param.x, this.param.y, this.param.z)
                this.scene.add(box);
            }
            initRender(status) {

                let v1 = new THREE.Vector3(0, 0, 0)
                // let renderer = new THREE.WebGLRenderer();
                let renderer = new THREE.WebGLRenderer({ alpha: true });
                renderer.setSize(this.width, this.height);//设置渲染区域尺寸

                // 添加控制器
                this.control = new OrbitControls(this.camera, renderer.domElement);
                this.control.target = v1 //设置相机方向(指向的场景对象)
                this.control.update();
          
                // renderer.setClearColor(0xb9d3ff, 1);
                // 渲染函数
                let render = () => {
                    // console.log(actions)
                    let status = this.status
                    // actions[status]?.play();
                    const delta = clock.getDelta();
                    if ( mixer ) mixer.update( delta );
                    this.control.update();
                    // this.mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
                    renderer.render(this.scene, this.camera);//执行渲染操作
                    // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
                    requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
                }
                render(status);
                return renderer
            }


        }

        let three = new threeInit()
        three.initGui(1)
        
        // three.initSkyBox()
        three.initVr("https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/left.png",'https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/right.png',"https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/front.png" )
        setTimeout(()=>{
            three.initVr("https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/py1.jpg",'https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/py1.jpg',"https://cdn.jsdelivr.net/npm/electroluxasset/skybox/skyboxsun25deg/py1.jpg" )
        },2000)
        
        let status = 16

        document.querySelector('.canvas').appendChild(three.initRender().domElement);

  
        // actions[0].play()
        
        // change(16)
        // function createAction(i){
        //         // actions[i] = mixer.clipAction(mesh.animations[i]);
        //         console.log(actions)
                // for(var j=0; j<actions.length; j++){
                //         if(j == i){
                //             actions[j].play();
                //         }
                //         else{
                //             actions[j].stop();
                //         }
                //     }

               
        //     }
        //     createAction(2)
    </script>

    <script>
        
    </script>
</body>

</html>